<template>
    <div class="index">
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card>
                    <template #header>
                        <div class="userInfo">
                            <div class="avatar">
                                <el-avatar :src="userStore.userInfo.avatar" shape="square" :size="60"></el-avatar>
                            </div>
                            <div class="info">
                                <span class="username">{{ userStore.userInfo.username }}</span>
                                <span>超级管理员</span>
                            </div>
                        </div>
                    </template>
                    <p>登录时间：{{ otherStore.userLoginTime }}</p>
                    <p>登录地点：江西</p>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card>
                    <template #header>12月统计信息</template>
                    <div class="chart">
                        <div>
                            <div class="icon">
                                <el-icon>
                                    <Tickets />
                                </el-icon>
                            </div>
                            <div class="info">
                                <span>500</span>
                                <span>商品数量（个）</span>
                            </div>
                        </div>
                        <div>
                            <div class="icon">
                                <el-icon>
                                    <Tickets />
                                </el-icon>
                            </div>
                            <div class="info">
                                <span>20</span>
                                <span>商品分类个数</span>
                            </div>
                        </div>
                        <div>
                            <div class="icon">
                                <el-icon>
                                    <Tickets />
                                </el-icon>
                            </div>
                            <div class="info">
                                <span>500</span>
                                <span>用户访问次数</span>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <div ref="lineChartRef" class="lineChart"></div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card>
                    <div ref="barChartRef" class="lineChart"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import { useUserInfoStore } from '@/stores/userInfo';
import { useOtherStore } from '@/stores/other';
import { Tickets } from '@element-plus/icons-vue';
const userStore = useUserInfoStore();
const otherStore = useOtherStore();
// 折线图
import * as echarts from 'echarts';
var lineChartRef = ref(null);
var lineChart;
// 柱状图
var barChartRef = ref(null);
var barChart;
// 初始折线图
const initLineChart = () => {
    lineChart = echarts.init(lineChartRef.value);
    var option = {
        title: {
            text: '2022年度成交额'
        },
        legend: {
            data: ['成交额']
        },
        xAxis: {
            type: 'category',
            data: ['1月份', '3月份', '5月份', '7月份', '9月份', '11月份']
        },
        yAxis: {
            name: '单位（千元）',
            type: 'value'
        },
        series: [
            {
                name: '成交额',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }
        ]
    };
    lineChart.setOption(option);
}
// 初始柱状图
const initBarChart = () => {
    barChart = echarts.init(barChartRef.value);
    var option = {
        title: {
            text: "2022年订单数量"
        },
        legend: {},
        xAxis: {
            type: 'category',
            data: ['1月份', '', '3月份', '', '5月份', '', '7月份', '', '9月份', '', '11月份', '']
        },
        yAxis: {
            name: '单位（个）',
            type: 'value'
        },
        series: [
            {
                name: "订单总数",
                data: [120, 200, 150, 180, 170, 110, 130, 400, 300, 400, 100, 123],
                type: 'bar'
            }
        ]
    };
    barChart.setOption(option);
}
// 加载全部图表
onMounted(async () => {
    await nextTick();
    initLineChart();
    initBarChart();
});
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;
}

.userInfo {
    display: flex;
    column-gap: 20px;
}

.userInfo .info {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    text-align: left;
    font-size: 15px;
}

.userInfo .info .username {
    font-size: 24px;
}

.el-card p {
    margin-bottom: 10px;
}

.chart {
    display: flex;
    justify-content: space-around;
}

.chart>div {
    display: flex;
    column-gap: 20px;
}

.chart>div .icon {
    width: 90px;
    height: 90px;
    font-size: 60px;
    color: #fff;
    background-color: #bbbbbb;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chart>div .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 5px;
    text-align: center;
}

.lineChart {
    height: 400px;
}
</style>